{% stylesheet %}
    @font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url(https://fonts.gstatic.com/s/oswald/v40/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUZiZQ.woff2) format('woff2');
    }
    .container_wrapper{
      box-sizing: border-box;
    }
    .digital_growth-warp {
      display: grid;
      grid-template-columns: repeat(var(--wap-columns),minmax(0,1fr));
      justify-content: space-between;
      padding:20px 0 ;
      overflow: hidden;
    }
    .digital_growth-warp .digital_growth-item {
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      padding: 30px;
      box-sizing: border-box;
    }

    .digital_growth-warp .digital_growth-item:last-child {
      border-right:none;

    }
    .digital_growth-warp svg{
      width:32px;
      height:32px;
    }

    .digital_growth-warp svg path{
      fill:var(--main_button_bg)
    }

    .digital_growth-warp .digital_growth-item .item-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      flex-shrink: 0;
      padding:20px;
      border: 1px solid var(--border_color);
    }
    

    .digital_growth-warp .item-content {
      display: flex;
      flex-direction: column;
      align-content: center;
      text-align: center;
      margin-top: 20px;
      overflow: hidden;
    }

    .digital_growth-warp .item-content .item-value {
      font-size: var(--number_size);
      line-height: var(--number_size);
      color: var(--title_color);
      font-family: "Oswald";
    }

    .digital_growth-warp .item-content .item-label {
      color: #6c6c6c;
      margin-top: 14px;
    }

    .digital_growth {
      position: relative;
    }

    .digital_growth_value {
      position: absolute;
      top: 0;
      left: 0;
      text-align:center;
      right:0;
    }
    .digital_growth_placeholder{
      opacity: 0;
      padding:0 10px;
    }

    .digital_growth-warp-link{
      display: none;
    }

  @media (min-width: 576px){
    .digital_growth-warp {
     grid-template-columns: repeat(var(--columns),minmax(0,1fr));
     gap:30px;
   }
  }
  @media (min-width: 992px){

    .digital_growth-warp .item-content {
      margin-left: calc((6 - var(--columns))  * 10px) ;
      text-align:left;
      margin-top: 0;

    }
    .digital_growth_value {
      text-align:left;
    }
    .digital_growth-warp .digital_growth-item {
      display: flex;
      align-items: self-start;
      flex-direction: row;
      justify-content: center;
      padding: 35px 0;
      position:relative;
    }
    .digital_growth-warp .digital_growth-item::after{
      position:absolute;
      top:0;
      right:-15px;
      bottom:0;
      width:1px;
      background-color: var(--border_color);
      content:""
    }
   
  }
{% endstylesheet %}

{% assign settings = section.settings %}
<div class="container_wrapper" style="--number_size:{{settings.number_size}}px;--wap-columns:{{settings.wap_columns}};--icon_color:{{settings.icon_color}};--border_color:{{settings.border_color}};--columns:{{settings.columns}};position: relative;">
  {% include 'block_title', title:section.settings.title, detail:section.settings.detail %}
  <div class="digital_growth-warp">
    {% for block in section.blocks %}
      <div class="digital_growth-item">
        <div class="item-icon">
          {% if block.image.src != '' %}
            <img
              data-src="{{ block.image.src }}"
              src="{{ 'empty_loading.png' | public_asset_abs_url }}"
              alt="{{ block.image.alt}}"
              style="width:auto;height:32px"
            >
          {% else %}
            {% include "icon_slogan", slogan:block.icon %}
          {% endif %}
        </div>
        <div class="item-content">
          <div class="item-value digital_growth" data-value="{{block.number}}" data-unit="{{block.unit}}">
            <span class="digital_growth_placeholder">
              {{-block.number-}}
              {{-block.unit-}}
            </span>
            <span class="digital_growth_value"></span>
          </div>
          {% if block.label %}
            <div class="item-label">{{ block.label }}</div>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>
</div>

<script>
  $(function () {
    function interObserver(option) {
      var observersNodes = [];

      function addObserversNodes(Node) {
        observersNodes.push(Node);
      }

      $(option.class).each(function () {
        addObserversNodes($(this));
      });

      function scrollObserver() {
        const $window = $(window);

        // 获取页面滚动的高度:
        const wtop = $window.scrollTop();
        // 判断是否还有未加载的img:
        if (observersNodes.length > 0) {
          // 获取可视区域高度:
          const wheight = $window.height();
          const delIndexs = [];
          for (let i = 0; i < observersNodes.length; i++) {
            const $i = observersNodes[i];
            // 判断是否在可视范围内:
            if ($i.offset().top - wtop - 100 < wheight && $i.is(':visible')) {
              delIndexs.push(i);
              option.visualCallback && option.visualCallback($i);
            }
          }

          for (let i = delIndexs.length - 1; i >= 0; i--) {
            observersNodes.splice(delIndexs[i], 1);
          }
        }
      }
      document.addEventListener('scroll', scrollObserver);

      scrollObserver();
      return { addObserversNodes, scrollObserver };
    }
    const { addObserversNodes } = interObserver({
      class: '.digital_growth',
      visualCallback: function (jqNode) {
        const value = jqNode.data('value');
        const unit = jqNode.data('unit');
        const speed = Math.floor(value / 120);
        const increment = speed < 1 ? 1 : speed;
        let start = 0;
        let contTimer = 0;
        function formatNumber(num) {
          return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
        function setValue(value) {
          return formatNumber(value) + '' + unit;
        }

        let timer = setInterval(function () {
          start = start + increment;
          jqNode.find('.digital_growth_value').text(setValue(start));
          if (contTimer === 120) {
            jqNode.find('.digital_growth_value').text(setValue(value));
            clearInterval(timer);
          }
          ++contTimer;
        }, 10);
      },
    });
    $(".digital_growth-warp-link-tiem").height($(".digital_growth-item").eq(0).innerHeight())
    
  });
</script>
{% comment %} 
 {
      "type": "card_header",
      "label": {
        "zh_CN": "颜色设置"
      }
    },
    {
      "type": "card_color",
      "id": "icon_color",
      "label": {
        "zh_CN": "图标颜色"
      },
      "default": "#000000"
    },
    {
      "type": "card_color",
      "id": "border_color",
      "label": {
        "zh_CN": "边框颜色"
      },
      "default": "#dee2e6"
    },
{% endcomment %}
{% schema %}
{
	"tag": "",
	"class": "block_digital_growth",
	"is_global": false,
	"name": {
		"zh_CN": "数字增长",
		"en_US": "Digital growth"
	},
	"max_blocks": 10,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			},
			"default": "Digital Growth"
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			},
			"default": ""
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "数字大小",
				"en_US": "Number size"
			},
			"id": "number_size",
			"max": 52,
			"unit": "px",
			"min": 14,
			"default": 42
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "移动端每行数量",
				"en_US": "Number of rows per mobile terminal"
			},
			"id": "wap_columns",
			"max": 2,
			"unit": "",
			"min": 1,
			"default": 1
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "pc每行数量",
				"en_US": "Number of rows per PC"
			},
			"id": "columns",
			"max": 5,
			"unit": "",
			"min": 1,
			"default": 3
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "数字增长",
				"en_US": "Digital growth"
			},
			"type": "digital_growth_item",
			"settings": [
				{
					"type": "card_select",
					"label": {
						"zh_CN": "选择图标",
						"en_US": "Select icon"
					},
					"id": "icon",
					"option": [
						{
							"label": {
								"zh_CN": "物流",
								"en_US": "Logistics"
							},
							"value": "oemsaas-wuliu",
							"icon": "shopyyicon-wuliu"
						},
						{
							"label": {
								"zh_CN": "货币",
								"en_US": "Money"
							},
							"value": "oemsaas-huobi",
							"icon": "shopyyicon-huobi"
						},
						{
							"label": {
								"zh_CN": "认证",
								"en_US": "Authentication"
							},
							"value": "oemsaas-renzheng",
							"icon": "shopyyicon-renzheng"
						},
						{
							"label": {
								"zh_CN": "全球交付",
								"en_US": "Global delivery"
							},
							"value": "oemsaas-quanqiujiaofu",
							"icon": "shopyyicon-quanqiujiaofu"
						},
						{
							"label": {
								"zh_CN": "买家保护",
								"en_US": "Buyer protection"
							},
							"value": "oemsaas-maijiabaohu",
							"icon": "shopyyicon-maijiabaohu"
						},
						{
							"label": {
								"zh_CN": "手机",
								"en_US": "Cell phone"
							},
							"value": "oemsaas-iphone",
							"icon": "shopyyicon-shouji"
						},
						{
							"label": {
								"zh_CN": "聊天",
								"en_US": "Chat"
							},
							"value": "oemsaas-liaotian",
							"icon": "shopyyicon-liaotian"
						},
						{
							"label": {
								"zh_CN": "信用卡",
								"en_US": "Credit card"
							},
							"value": "oemsaas-xinyongka",
							"icon": "shopyyicon-xinyongka"
						},
						{
							"label": {
								"zh_CN": "邮箱",
								"en_US": "Mailbox"
							},
							"value": "oemsaas-youxiang",
							"icon": "shopyyicon-youxiang"
						},
						{
							"label": {
								"zh_CN": "定位",
								"en_US": "Positioning"
							},
							"value": "oemsaas-dingwei",
							"icon": "shopyyicon-dingwei"
						},
						{
							"label": {
								"zh_CN": "问题",
								"en_US": "Problem"
							},
							"value": "oemsaas-wenti",
							"icon": "shopyyicon-wenti"
						},
						{
							"label": {
								"zh_CN": "笑脸",
								"en_US": "Smiley face"
							},
							"value": "oemsaas-xiaolian",
							"icon": "shopyyicon-xiaolian"
						},
						{
							"label": {
								"zh_CN": "店铺/房子",
								"en_US": "Shop/house"
							},
							"value": "oemsaas-dianpufangzi",
							"icon": "shopyyicon-a-dianpufangzi"
						},
						{
							"label": {
								"zh_CN": "礼物",
								"en_US": "The gift,"
							},
							"value": "oemsaas-liwu",
							"icon": "shopyyicon-liwu"
						},
						{
							"label": {
								"zh_CN": "爱心",
								"en_US": "Love"
							},
							"value": "oemsaas-aixin",
							"icon": "shopyyicon-aixin"
						},
						{
							"label": {
								"zh_CN": "折扣",
								"en_US": "Discount"
							},
							"value": "oemsaas-zhekou",
							"icon": "shopyyicon-zhekou"
						},
						{
							"label": {
								"zh_CN": "安全锁",
								"en_US": "Safety lock"
							},
							"value": "oemsaas-anquansuo",
							"icon": "shopyyicon-anquansuo"
						},
						{
							"label": {
								"zh_CN": "转换",
								"en_US": "Transform"
							},
							"value": "oemsaas-zhuanhuan",
							"icon": "shopyyicon-zhuanhuan"
						},
						{
							"label": {
								"zh_CN": "购物车",
								"en_US": "Shopping cart"
							},
							"value": "oemsaas-gouwuche",
							"icon": "shopyyicon-gouwuche"
						},
						{
							"label": {
								"zh_CN": "24h",
								"en_US": "24h"
							},
							"value": "oemsaas-a-24h",
							"icon": "shopyyicon-a-24h"
						},
						{
							"label": {
								"zh_CN": "商品",
								"en_US": "Product"
							},
							"value": "oemsaas-shangpin",
							"icon": "shopyyicon-shangpin"
						},
						{
							"label": {
								"zh_CN": "优惠券",
								"en_US": "Coupons"
							},
							"value": "oemsaas-youhuiquan",
							"icon": "shopyyicon-youhuiquan"
						},
						{
							"label": {
								"zh_CN": "客户群",
								"en_US": "Customer base"
							},
							"value": "oemsaas-kehuqun",
							"icon": "shopyyicon-kehuqun"
						},
						{
							"label": {
								"zh_CN": "编辑",
								"en_US": "Edit"
							},
							"value": "oemsaas-bainji",
							"icon": "shopyyicon-bianji"
						},
						{
							"label": {
								"zh_CN": "会员",
								"en_US": "Member"
							},
							"value": "oemsaas-huiyuan",
							"icon": "shopyyicon-huiyuan"
						},
						{
							"label": {
								"zh_CN": "航运",
								"en_US": "Shipping"
							},
							"value": "oemsaas-hangyun",
							"icon": "shopyyicon-hangyun"
						},
						{
							"label": {
								"zh_CN": "建筑",
								"en_US": "Architecture"
							},
							"value": "oemsaas-jianzhu",
							"icon": "shopyyicon-jianzhu"
						},
						{
							"label": {
								"zh_CN": "赞美",
								"en_US": "Praise"
							},
							"value": "oemsaas-zanmei",
							"icon": "shopyyicon-zanmei"
						},
						{
							"label": {
								"zh_CN": "视频",
								"en_US": "Video"
							},
							"value": "oemsaas-shipin",
							"icon": "shopyyicon-shipin"
						},
						{
							"label": {
								"zh_CN": "个性定制",
								"en_US": "Customization"
							},
							"value": "oemsaas-gexingdingzhi",
							"icon": "shopyyicon-gexingdingzhi"
						},
						{
							"label": {
								"zh_CN": "增长",
								"en_US": "Growth"
							},
							"value": "oemsaas-zengzhang",
							"icon": "shopyyicon-zengzhang"
						},
						{
							"label": {
								"zh_CN": "资料",
								"en_US": "Data"
							},
							"value": "oemsaas-ziliao",
							"icon": "shopyyicon-ziliao"
						},
						{
							"label": {
								"zh_CN": "学生",
								"en_US": "Student"
							},
							"value": "oemsaas-xuesheng",
							"icon": "shopyyicon-xuesheng"
						},
						{
							"label": {
								"zh_CN": "办公",
								"en_US": "Office"
							},
							"value": "oemsaas-bangong",
							"icon": "shopyyicon-bangong"
						},
						{
							"label": {
								"zh_CN": "模块",
								"en_US": "Module"
							},
							"value": "oemsaas-mokuai",
							"icon": "shopyyicon-mokuai"
						},
						{
							"label": {
								"zh_CN": "文件包",
								"en_US": "File package"
							},
							"value": "oemsaas-wenjianbao",
							"icon": "shopyyicon-wenjianbao"
						},
						{
							"label": {
								"zh_CN": "文件",
								"en_US": "File"
							},
							"value": "oemsaas-wenjian",
							"icon": "shopyyicon-wenjian"
						},
						{
							"label": {
								"zh_CN": "条约",
								"en_US": "The Treaty"
							},
							"value": "oemsaas-tiaoyue",
							"icon": "shopyyicon-tiaoyue"
						},
						{
							"label": {
								"zh_CN": "商务",
								"en_US": "Business"
							},
							"value": "oemsaas-shangwu",
							"icon": "shopyyicon-shangwu"
						},
						{
							"label": {
								"zh_CN": "分享",
								"en_US": "Share"
							},
							"value": "oemsaas-a-fenxiangfabu",
							"icon": "shopyyicon-a-fenxiangfabu"
						}
					],
					"default": "oemsaas-wuliu"
				},
				{
					"type": "card_image",
					"label": {
						"zh_CN": "选择图片",
						"en_US": "Select image"
					},
					"info": {
						"zh_CN": "尺寸建议48*48px",
						"en_US": "Size suggested 48*48px"
					},
					"id": "image",
					"default": {
						"src": "",
						"alt": ""
					}
				},
				{
					"type": "card_input_number",
					"label": {
						"zh_CN": "数字",
						"en_US": "Number"
					},
					"id": "number",
					"default": 1280
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "单位",
						"en_US": "Unit"
					},
					"id": "unit",
					"default": ""
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "文字",
						"en_US": "Words"
					},
					"id": "label",
					"default": ""
				}
			]
		}
	],
	"default": {
		"settings": {
			"title": "Digital Growth",
			"detail": "",
			"icon_color": "#ff9900",
			"border_color": "#dee2e6",
			"number_size": 42,
			"columns": 3,
			"wap_columns": 1
		},
		"blocks": [
			{
				"icon": "oemsaas-wuliu",
				"image": {
					"src": "",
					"alt": ""
				},
				"number": 2589,
				"unit": "",
				"label": "Happy Clients",
				"block_type": "digital_growth_item"
			},
			{
				"icon": "oemsaas-xinyongka",
				"image": {
					"src": "",
					"alt": ""
				},
				"number": 589,
				"unit": "k",
				"label": "Projects Done",
				"block_type": "digital_growth_item"
			},
			{
				"icon": "oemsaas-renzheng",
				"image": {
					"src": "",
					"alt": ""
				},
				"number": 3282,
				"unit": "K",
				"label": "Cup of coffee",
				"block_type": "digital_growth_item"
			}
		]
	},
	"icon": "icon-Growth"
}
{% endschema %}
